<template>
  <div class="box-list">
    <div class="box-list_head">
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item  style="margin-left: 15px" v-if="operate=='ru'">
          <i class="el-icon-check"></i>
          <el-link type="success" @click="tagRead">标记已读</el-link>

        </el-form-item>

        <el-form-item label="日期：">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="-"
            unlink-panels
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="text" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-list_content">
      <div class="box-item" v-for="item in dataList" v-if="dataList.length>0">
        <div class="box-item_head"  @click="goingClick(item)">
          <div class="box-item_title">{{item.title}}</div>
          <span>{{item.time}}</span>
        </div>
        <p class="box-item_detail">{{item.detail}}
          <i class="isdelay el-icon-time"></i>
        </p>
      </div>
      <p v-else>暂无数据</p>
    </div>
    <div class="box-pagination">
      <el-pagination
        background
        :pager-count="5"
        @current-change="handleCurrentChange"
        :current-page="queryForm.page"
        :page-size="queryForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        >
      </el-pagination>
    </div>
    <el-dialog  fullscreen :visible.sync="rundialogGoingVisible"   @close='closeDialog'>
      <div >
        <task-details :pid="hisProcessInstanceId"></task-details>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getCommuData,getHisCommuData,tagReadTimeAllNotification} from "@/api/index"

  import taskDetails from '@/views/bpm/histask/details'

  export default {
      name:'indexcard',
    components: {
      taskDetails,
    },
      data(){
        return{
          hisProcessInstanceId:"",
          rundialogGoingVisible:false,
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          total:0,

          queryForm:{
            page: 1,
            pageSize: 10
          },
          formInline:{
            time:[],
            page: 1,
            limit: 10,
            start: "",
            end: "",
          },

          dataList:[


          ]
        }
      },
      props: {
        operate: {
          type: String,
          default: "ru"
        },
        pid: {
          type: String,
          default: ""
        }
      },
      methods:{
        closeDialog(){
          this.hisProcessInstanceId=""
        },

        goingClick(data) {
          this.hisProcessInstanceId=data.procId
          this.rundialogGoingVisible=true;
        },
        tagRead:function(){
         //tagReadTimeAllNotification
          tagReadTimeAllNotification().then((response) => {
            if (response.code == 0) {
              this.getCommuData();
            }else{
            }
          })
        },
        restartForm(){
          this.formInline.start=""
          this.formInline.end=""
          this.formInline.time=[]
          this.formInline.page=1;
          this.queryForm.page=1;
        },
        onSubmit(){
          this.formInline.page=1;
          this.queryForm.page=1;
          if (this.formInline.time){
            this.formInline.start=this.formInline.time[0]
            this.formInline.end=this.formInline.time[1]
          }else{
            this.formInline.start=""
            this.formInline.end=""
          }
          this.initData()
        },
        handleCurrentChange(val) {
          this.formInline.page = val
          this.initData()
        },
        getCommuData:function(){
          getCommuData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data=response.data
              data.forEach(item => {
                item.detail ="标题:"+ item.title;
                item.title = item.commu+"『给我送来了一条传阅消息』";
              })
              this.dataList=data;
              this.total=parseInt(response.count);
            }else{
            }
          })
        },
        getHisCommuData:function(){
          getHisCommuData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data=response.data
              data.forEach(item => {
                item.detail ="标题:"+ item.title;
                item.title = item.commu+"『给我送来了一条传阅消息』";

              })
              this.dataList=data;
              this.total=parseInt(response.count);
            }else{
            }

          })
        },
        initData(){
          if (this.operate=='ru') {
            this.getCommuData();
          } else if (this.operate=='his') {
            this.getHisCommuData();
          }
        },

      },
      created() {
        if (this.operate){
          //执行逻辑
          this.initData();
        }
      },

      watch: {
        operate() {
          if (this.operate) {
            this.restartForm()
            this.initData();
          }



        }
      }
    }
</script>

<style lang="scss" scoped>
.box-list{
  .box-list_head{
    background:#f4f7fd;
    padding:5px 0px;
    .el-form-item{
      margin-bottom: 0px;
      ::v-deep.el-date-editor--daterange{
        max-width: 250px;
      }
    }
  }
  .box-list_content{
    font-size: 12px;
    color:#666;
    padding:0px 20px;
    height: 350px;
    overflow-y:auto;
    .box-item{
      cursor: pointer;
      box-sizing: border-box;
      padding:10px 0px 10px 10px;
      border-bottom:1px solid #dedede;
      .box-item_head{
        display: flex;
        line-height: 24px;
        margin-bottom: 5px;
        .box-item_title{
          flex: 1;
          font-size: 14px;
          color:#333;
          width:100%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        span{
          display: inline-block;
        }
      }
      .box-item_detail{
        line-height: 1.7;
        position: relative;
        padding-right:20px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .isdelay{
          font-size: 18px;
          z-index: 3;
          position: absolute;
          top:50%;
          right:0px;
          transform: translate(-0%,-50%);
        }
      }
    }
  }
  .box-pagination{
    background: #f4f7fd;
    padding:5px 20px;
  }
}
</style>
